<template>
  <div className="app-container">
    <div className="table-container">
      <base-list
        ref="table"
        url="/banner_info"
        :options="options"
        :columns="columns"
        :format="format"
        :rules="rules"
        permission="ADMIN"
        @reloadOptions="handleGetOptions"
      />
    </div>
  </div>
</template>

<script>
import {getBaseList, getBaseOptions} from '@/api/common'
import BaseList from '@/components/BaseList/index.vue'

export default {
  name: 'BannerInfo',
  components: {BaseList},
  data() {
    return {
      columns: [
        {show: true, edit: true, width: 'auto',minWidth: '300', key: 'title', label: '标题', tooltip: '标题', type: 'WORD', queryable: true, sortable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'image', label: '图片', tooltip: '图片', type: 'IMAGE', imageSuffix: 'banner-'},
        {show: true, edit: true, width: 'auto',minWidth: '300', key: 'path', label: '跳转页面', tooltip: '跳转页面', type: 'WORD'},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'pathType', label: '跳转方式', tooltip: '跳转方式', type: 'DICTIONARY', optionKey: 'pathTypeOption', queryable: true, sortable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'status', label: '启用状态', tooltip: '启用状态', type: 'DICTIONARY', optionKey: 'bannerStatusOption', queryable: true, sortable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'startTime', label: '开始时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'endTime', label: '结束时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createTime', label: '创建时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: true, edit: false, width: 'auto',minWidth: '200', key: 'updateTime', label: '更新时间', tooltip: '更新时间', type: 'DATE_TIME', queryable: true},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createUser', label: '创建人', tooltip: '创建人', type: 'WORD'},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'updateUser', label: '修改人', tooltip: '修改人', type: 'WORD'},
      ],
      format: {},
      rules: {
        add: {
          title: [{required: true, message: '标题必填!', trigger: 'blur'}],
          image: [{required: true, message: '图片必填!', trigger: 'blur'}],
          path: [{required: true, message: '跳转页面必填!', trigger: 'blur'}],
          pathType: [{required: true, message: '跳转方式必填!', trigger: 'blur'}],

        },
        edit: {
          id: [{required: true, message: '请选择数据!', trigger: 'change'}],
          title: [{required: true, message: '标题必填!', trigger: 'blur'}],
          image: [{required: true, message: '图片必填!', trigger: 'blur'}],
          path: [{required: true, message: '跳转页面必填!', trigger: 'blur'}],
          pathType: [{required: true, message: '跳转方式必填!', trigger: 'blur'}],

        }
      },
      options: {
        pathTypeOption: [{ id: 'MINI_APP', name: '小程序内部跳转', type: 'success' }, { id: 'URL', name: '外部链接跳转', type: 'warning' }, { id: 'TEXT', name: '文本', type: 'primary' }],
        bannerStatusOption: [{ id: 'ENABLE', name: '启用', type: 'success' }, { id: 'DISABLE', name: '禁用', type: 'danger' }]
      }
    }
  },

  created() {
    this.handleGetOptions()
  },
  mounted() {
  },
  methods: {
    handleGetOptions() {
      const options = JSON.parse(localStorage.getItem('allOptions'))
      if (options) {
        this.options = Object.assign(this.options, options)
      }
    }
  }
}
</script>


